<template>
  <div>
    <h3>注册</h3>
    <h3>注册页面</h3>
    <!--el-form（总的）表单标签      model表单绑定数据   :动态绑定 不绑定就是字符串-->
    <!-- rules：校验规则 label-width：提示语的宽度       ref表单的名字-->
    <el-form :model="ruleUser" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width:600px;margin:0 auto">
        <!-- el-form-item（小的）表单项   label提示   prop校验规则名--> 
      <el-form-item label="用户名" prop="username">
            <el-input  v-model="ruleUser.username"></el-input>
        </el-form-item>
        <!-- autocomplete="off"自动补全 -->
        <el-form-item label="密码" prop="password1">
            <el-input type="password" v-model="ruleUser.password1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
            <el-input type="password" v-model="ruleUser.password2" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="mobile">
            <el-input  v-model="ruleUser.mobile" ></el-input>
        </el-form-item>

        <el-form-item label="图片验证码" prop="imageCode">
            <el-input  v-model="ruleUser.imageCode"  style="width:60%"></el-input>
            <div class="img">
              <!--:src="iamgeUrl" mounth()加载时     触发事件切换图片-->
              <img  :src="iamgeUrl" alt="图形验证码" @click="image" style="height:50px">
            </div>
        </el-form-item>

        <el-form-item  prop="agree">
          <el-checkbox v-model="ruleUser.agree">同意用户协议</el-checkbox>
        </el-form-item>
       
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
           
        </el-form-item>
</el-form>

  </div>
</template>

<script>
import  {v4 as uuid4} from 'uuid';    //导入图片链接
import axios from 'axios'
export default {
    data(){
      // 匿名函数   箭头函数  value输入的内容  callback回调函数
      var validateUsername=(rule, value, callback) => {
          if (!value === ''){
            return callback(new Error('请输入用户名'))
          }
          // 使用正则校验用户名
          // const局部变量不可变的   var全局变量   let局部变量   两个//中间是正则表达式
          // 用户名：字母开头  中间是数字字母下划线  5-16位
          const nameRule=/^[a-zA-Z]\w{4,15}$/
          // 调用test方法 校验
          if(nameRule.test(value)){
            //格式正确   动态的用户名value
              axios.get('user/username/'+value+'/')
              .then(resp=>{
                console.log(resp);
                // code 标记位 200
                if(resp.data.code == 200){
                    return callback()   //校验通过  √
                }else{
                  // 错误信息
                    return callback(new Error(resp.data.msg))
                }
            })
              .catch(err=>{
                console.log(err);
            })
            // 校验不通过 else
          }
          else{
            return callback(new Error('用户名的格式不正确字母开头  中间是数字字母下划线  5-16位'))
          }
      };
      
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          // callback里面有error报错   里面没东西  √
          callback(new Error('请输入密码'));
        } 
        //格式字母开头 其余数字字母下划线
        const passRule=/^[a-zA-Z]\w{5,16}$/
        if(passRule.test(value)){
          return callback()
        }else{
          return callback(new Error('密码格式不正确'))
        }
        
      };
      var validatePassword2 = (rule, value, callback) => {
        if (value === '') {
            return callback(new Error('请输入确认密码'));
        }
        // 判断两次密码是否正确
        if(value != this.ruleUser.password1){
            return callback(new Error('两次密码不一致'))
        }else{
            return callback() 
        }
      };
      var validateMobile=(rule, value, callback)=>{
          if(value === ''){
            callback(new Error('请输入手机号'));
          }
          const mobileRule=/^1[3-9]\d{9}$/
          if(mobileRule.test(value)){
              axios.get('user/mobile/'+value+'/')
              .then(resp=>{
                console.log(resp);
                if(resp.data.code == 200){
                    return callback()
                }else{
                    return callback(new Error(resp.data.msg))
                }
            })
            .catch(err=>{
                console.log(err);
            })
      } 
        else{
              return callback(new Error('手机号的格式不正确'))
      }
      
      };
      var validateImageCode = (rule, value, callback)=>{
        if(value === ''){
            callback(new Error('请输入图片验证码'));
        }
        // imgId生成图片链接的时候生成的   post(参数):'code':value当前文本框输入的验证码 发送给后端校验  code':value 验证码是谁
        axios.post('user/img/'+this.imgId+'/',{'code':value})
              .then(resp=>{
                console.log(resp);
                if(resp.data.code == 200){
                    return callback()  //√
                }else{
                    return callback(new Error(resp.data.msg))
                }
            })
            .catch(err=>{
                console.log(err);
            })
      } 
        return{
            iamgeUrl:'',//图片链接
            imgId:"",   //uuid
            ruleUser: {//注册用户数据
                username:'',
                password1: '',
                password2:"",
                mobile:'',
                imageCode: "",//用户输入的验证码
                agree:false //同意用户协议
        },
        // rules总的校验规则  username是分的校验规则
        rules: {  //校验规则  跟prop里面对应的一般是全部对应上

          // // validator失去焦点时触发的校验方法  trigger触发方式  blur失去光标
           username: [ 
            { validator: validateUsername, trigger: 'blur' }
          ],
          password1: [
            { validator: validatePass, trigger: 'blur' }
          ],
            password2: [ 
            { validator: validatePassword2, trigger: 'blur' }
          ],
          mobile:[
            {validator:validateMobile,trigger: 'blur'}
          ],
          // 校验方法跟return里面的一致
          imageCode:[
            {validator:validateImageCode,trigger: 'blur'}
          ]


        }
        }
    },
     mounted(){
      // 页面加载时生成一个图片链接
        this.image()
    },
    methods: {
      // 生成图片链接的方法  输入框后面的图片
        image() {
            this.imgId = uuid4()  //生成uuid
            // 拼接图片链接
              this.iamgeUrl = "user/img/" + this.imgId + "/"   //生成链接
            },
        submitForm(formName) {
          // 再次校验表单
            this.$refs[formName].validate((valid) => {
              if (valid) { //如果再次校验通过  如果验证码输入成功 等十分钟注册就不可以了
                // 前后端同意的情况下可以直接写 ruleUser   不统一一个个组装跟老师发的一样

                // 发送注册请求
                axios.post('user/reg/',this.ruleUser)
                .then(resp=>{
                  console.log(resp);
                  if(resp.data.code == 200){
                    alert('注册成功')
                    this.$router.push('/login')
                  }else{
                    alert(resp.data.msg)
                  }
                })
                .catch(err=>{
                  console.log(err);
                })
              } else {
                console.log('error submit!!');
                return false;
              }
            });
      },

        // reg() {
        // axios.post("/user/reg/", {
        //       username: this.ruleUser.username,
        //       password1: this.ruleUser.password,
        //       mobile: this.ruleUser.mobile,
        //     })

            
        //     .then(resp=> {
        //       console.log(resp);
        //       if(resp.data.code == 200){
        //         alert('注册成功')
        //         this.$router.push('/login')
        //       }else{
        //         alert('注册失败')
        //       }
        //     })
        //     .catch((err) => {
        //       console.log(err);
        //     });
        // }, 
  }
}
</script>

<style>
.img{
  float: right;
  width:30%
}
</style>